<template>
	<el-dialog @opened="opened" title="新增建设单位" v-bind="$attrs" v-on="$listeners" width="400px">
		<div class="form-warp">
			<el-form :model="form" :rules="rules" class="demo-ruleForm" label-width="100px" ref="form">
				<el-form-item label="单位名称" prop="constructionUnits">
					<el-input maxlength="50" v-model="form.constructionUnits"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.remark"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<span class="dialog-footer" slot="footer">
			<el-button @click="close">取 消</el-button>
			<el-button @click="confirm" type="primary">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
import Api from './api'
export default {
	props: {
		value: {
			type: [Array, Object],
			volidator: function (val) {
				const type = Object.prototype.toString.call(val)
				if (type === '[object Object]') {
					return 'toArray' in val
				}
				return type === '[object Array]'
			}
		}
	},
	data() {
		return {
			form: {
				constructionUnits: '',
				remark: ''
			},
			rules: {
				constructionUnits: [{ required: true, message: '请输入单位名称', trigger: 'blur' }]
			}
		}
	},
	async mounted() {},
	methods: {
		opened() {
			this.$refs.form.resetFields()
			this.form.remark = ''
		},
		close() {
			this.$emit('update:visible', false)
		},
		confirm() {
			this.$refs.form.validate(async valid => {
				if (valid) {
					const res = await Api.addOrUpdate(this.form)
					this.ok('新增建设单位成功')
					// 添加完返回新增建设单位的信息
					this.$emit('confirm', {
						...this.form,
						id: res
					})
					this.close()
				} else {
					return false
				}
			})
		}
	},
	beforeDestroy() {}
}
</script>
<style lang="scss" scoped>
</style>
